'use client';

import { useEffect, useState } from "react";
import './modal.scss';

function Modal({ children, title, open, onClose }: { onClose?: Fn, open?: boolean, title: string, children: any }) {
    const [visible, setVisible] = useState(open ?? false);

    useEffect(() => {
        setVisible(open ?? false);
    }, [open]);

    const handleClose = () => {
        if (onClose) onClose();
        setVisible(false);
    }

    return (
        <div className={`modal-bg ${!visible ? 'hidden' : ''}`}>
            <div className={`modal`}>
                <button className="modal-close" onClick={handleClose}>x</button>
                <h3 className="modal-title">{title}</h3>
                {children}
            </div>
        </div>
    )
}

export default Modal;